
css
    /* 基础重置与全局样式 */
* {  /* 通配符选择器，选中所有元素 */
    margin: 0;  /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 改变盒模型计算方式（包含border和padding在宽高内） */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置全局字体栈 */
}

body {  /* 页面主体样式 */
    background: #f0f2f5;  /* 浅灰色背景 */
    line-height: 1.6;     /* 行高（文本行间距） */
    color: #000000;
    padding: 20px;        /* 页面内容与视口的间距 */
    font-family: '微软雅黑', sans-serif;
    background-color: #f4f4f9;
    font-weight: bold;
    background-repeat: no-repeat;
    /*设置背景图片不重复*/
    background-size: cover;
    /*设置背景图片大小为覆盖整个容器*/
    background-position: center;
    /*设置背景图片位置为居中*/
    font-family: Arial, sans-serif;
    /*设置字体为Arial或sans-serif*/

    margin: 0;
    /*设置外边距为0*/
    padding: 0;
    }




/* 容器样式 */
.container {  /* 内容容器 */
    max-width: 1200px;   /* 最大宽度限制 */
    margin: 0 auto;      /* 水平居中（上下外边距为0） */
    background:  #004b8057;
    padding: 2rem;       /* 内边距（响应式单位） */
    border-radius: 12px; /* 圆角边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 底部阴影效果 */
}

/* 标题样式 */
h1, h2, h3 {  /* 标题通用样式 */
    color: #5c5c5c;
    margin-bottom: 1.5rem; /* 底部外边距 */
    border-bottom: 2px solid #3498db; /* 下划线效果 */
    padding-bottom: 0.5rem; /* 下划线与文字间距 */
    display: inline-block; /* 行内块显示（使下划线宽度自适应内容） */
}

/* 按钮样式 */
.btn {  /* 按钮基础样式 */
    display: inline-block; /* 行内块显示 */
    padding: 0.8rem 1.6rem; /* 垂直/水平内边距 */
    border: none;          /* 移除默认边框 */
    border-radius: 6px;    /* 圆角 */
    cursor: pointer;       /* 手型光标 */
    transition: all 0.3s ease; /* 所有属性过渡动画 */
    font-weight: 500;      /* 字体加粗 */
    text-decoration: none; /* 移除下划线 */
}

.btn-primary {  /* 主按钮样式 */
    background: #3498db;  /* 蓝色背景 */
    color: white;         /* 白色文字 */
}

.btn-primary:hover {  /* 主按钮悬停状态 */
    background: #2980b9;  /* 更深的蓝色 */
    transform: translateY(-1px); /* 轻微上移效果 */
    box-shadow: 0 3px 8px rgba(52, 152, 219, 0.3); /* 悬停阴影 */
}

.btn-secondary {  /* 次按钮样式 */
    background: #95a5a6;  /* 灰色背景 */
    color: white;         /* 白色文字 */
}

.btn-secondary:hover {  /* 次按钮悬停状态 */
    background: #7f8c8d;  /* 更深的灰色 */
}

/* 表单样式 */
.form-group {  /* 表单组间距 */
    margin-bottom: 1.5rem; /* 底部外边距 */
}

.form-control {  /* 表单控件样式 */
    width: 100%;         /* 占满父容器宽度 */
    padding: 0.8rem;     /* 内边距 */
    border: 2px solid #ecf0f1; /* 浅灰色边框 */
    border-radius: 6px;  /* 圆角 */
    transition: border-color 0.3s ease; /* 边框颜色过渡 */
}

.form-control:focus {  /* 获得焦点状态 */
    outline: none;               /* 移除默认轮廓 */

    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* 焦点阴影 */
}

/* 卡片样式 */
.card {  /* 卡片基础样式 */
    background: white;   /* 白色背景 */
    border-radius: 12px; /* 大圆角 */
    padding: 1.5rem;     /* 内边距 */
    margin-bottom: 2rem; /* 底部外边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 微妙阴影 */
    transition: transform 0.3s ease; /* 变换过渡 */
}

.card:hover {  /* 卡片悬停状态 */
    transform: translateY(-3px); /* 轻微上移效果 */
}

/* 导航栏样式 */
.navbar {  /* 导航栏容器 */
    background: white;   /* 白色背景 */
    padding: 1rem;       /* 内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 底部阴影 */
    margin-bottom: 2rem; /* 底部外边距 */
}

.nav-list {  /* 导航列表 */
    list-style: none;    /* 移除列表符号 */
    display: flex;       /* 弹性布局 */
    gap: 2rem;           /* 项目间距 */
}

.nav-link {  /* 导航链接 */
    text-decoration: none; /* 移除下划线 */
    color: #2c3e50;      /* 深蓝色文字 */
    padding: 0.5rem 1rem; /* 内边距 */
    border-radius: 4px;  /* 小圆角 */
    transition: all 0.3s ease; /* 过渡动画 */
}

.nav-link:hover {  /* 导航悬停状态 */
    background: #3498db;  /* 蓝色背景 */
    color: white;         /* 白色文字 */
}

/* 响应式设计 */
@media (max-width: 768px) {  /* 屏幕宽度小于768px时生效 */
    .container {
        padding: 1rem;      /* 缩小容器内边距 */
    }

    .nav-list {
        flex-direction: column; /* 导航项垂直排列 */
        gap: 1rem;          /* 减小间距 */
    }

    .card {
        padding: 1rem;      /* 缩小卡片内边距 */
    }
}
